<template>
  <div>
    <div class="card-header">
      <span>{{ title }}</span>
      <svg t="1648204345717" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4188" width="16" height="16"><path d="M512 1024A512 512 0 1 1 512 0a512 512 0 0 1 0 1024zM448 448v384h128V448H448z m0-256v128h128V192H448z" fill="#8a8a8a" p-id="4189" /></svg>
    </div>
    <div class="card-container">
      <span>{{ contain }}</span>
    </div>
    <div class="card-charts">
      <slot name="charts" />
    </div>
    <div class="card-footer">
      <slot name="footer" />
    </div>
  </div>
</template>

<script>

export default {
  name: 'Detail',

  props: {
    title: {
      required: true,
      type: String
    },
    contain: {
      required: true,
      type: String
    }
  }
}
</script>

<style>
.card-header {
  display: flex;
  justify-content: space-between;
  color: rgb(187, 184, 184);
  font-size: 14px;
}
.card-container {
  width: 100%;
  margin:10px 0;
  font-size: 24px;
}
.card-charts {
  width: 100%;
  height: 60px;
  font-size: 14px;
  border-bottom: 1px solid rgb(204, 233, 240);
}
.card-footer {
  padding-top:10px;
}
</style>
